import { WeaSearchGroup,WeaSelect,WeaTools ,WeaErrorPage ,WeaFormItem ,WeaBrowser,WeaDialog,WeaRightMenu,WeaInput
,WeaHelpfulTip,WeaPopoverHrm ,WeaCheckbox} from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import {inject, observer} from "mobx-react/index";
import { Button , Modal , Row , Col} from 'antd';
import cloneDeep from 'lodash/cloneDeep';
import isEmpty from 'lodash/isEmpty';
import {WeaLocaleProvider} from 'ecCom';
import {checkEditRight,judgeRemindTime} from './workflowFreeUtils';
import * as mobx from 'mobx';

import FreeNodeReturnBackSetModal from './returnBackSetting';
const { toJS } = mobx;
const getLabel = WeaLocaleProvider.getLabel;


@observer
class WorkflowFreeRightDetail extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
        }
    }
    render(){
        const { workflowNewDesignStore , isFree='',isAllowNodeFreeFlow='1',isFlowModel} = this.props;
        const { detailForm_1 , rightDetailType = '',wfFreeDatas,componentNeedRender} = workflowNewDesignStore;
        return (
            <div className='wf-design-free-right-detail'>
                <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@azha90`} />
                <div className='detail-header'>
                    {rightDetailType == 'node' ? getLabel(15586,'节点') : rightDetailType == 'branch' ? getLabel(506887,'分支') : getLabel(31920,'加签')}{getLabel(713,'属性')}
                </div>
                <div className='detail-content'>
                    {(wfFreeDatas && rightDetailType != 'isModel_init') ? rightDetailType == 'node' ?
                        this.getCusDetailRender()
                        : rightDetailType == 'branch' ? this.getBranchDetailCont() 
                        : this.getSignSetRender()
                        :isFlowModel=='1'?
                        (<div className="blank-page">
                            <span className="icon-coms-blank"></span>
                            <p>{getLabel(506888,'请先添加或选择节点')}</p>
                        </div>)
                        :''
                    }
                </div>
                <FreeNodeReturnBackSetModal ecId={`${this && this.props && this.props.ecId || ''}_FreeNodeReturnBackSetModal@0rzlip`} workflowNewDesignStore = {workflowNewDesignStore}/>
            </div>
        )
    }
    SignSetComs=(label='',params={},comsType='input')=>{
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@cjaexq`}
        label={label}
        labelCol={{span: 8}}
        wrapperCol={{span: 16}}
        >
        {comsType==='input'?
        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@3ihe1i`} {...params} viewAttr={1}/>
        :<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@h2j490`} {...params}/>
        }
        </WeaFormItem>
        )
    }
    // 加签设置
    getSignSetRender = () => {
        const { workflowNewDesignStore } = this.props;
        const { currentSignSetNode = {} , signSetChangeBackNode , signSetIsReadOnly} = workflowNewDesignStore;
        const { nodeName = '' , nodeType = '0' , flowType='1'} = currentSignSetNode;
        let resuts = [];
        const options =[
            {
                key: "1",
                selected: false,
                showname: getLabel(506889,"回到本节点")
            },
            {
                key: "2",
                selected: true,
                showname: getLabel(506890,"自动转入下一节点")
            }
        ];
        const nodeTypeStr = nodeType == '0' ? getLabel(125,'创建') : nodeType == '3' ? getLabel(251,'归档') : nodeType == '1' ? getLabel(359,'审批') :nodeType == '2' ? getLabel(553,'处理') : getLabel(502267,'其他');
        let mockCondition = [
            {
                title:getLabel(385134,'节点信息'),
                items:[
                    {com:this.SignSetComs(getLabel(15070,'节点名称'),{value:nodeName}),col:1},
                    {com:this.SignSetComs(getLabel(15536,'节点类型'),{value:nodeTypeStr}),col:1}
                ]
            },
            {
                title:getLabel(506891,'加签属性'),
                items:[{com:this.SignSetComs(getLabel(506892,'流转结束后'),{
                    options,
                    value:flowType,
                    viewAttr:signSetIsReadOnly?1:2,
                    onChange(v){
                        signSetChangeBackNode(v)
                    }
                    },'select'),col:1}]
            }
        ];
        mockCondition.map((v,ecindex)=>{
            resuts.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9vqflw@${ecindex}`} title={v.title} items={v.items} showGroup={true}/>)
        })
        return resuts;
    }
    //form 自定义渲染
    getCusDetailRender = () =>  {
        const { workflowNewDesignStore , isFree,isReadOnlyModel} = this.props;
        const { freeDetailSetConditions ,groupApprovalSettings, detailForm_1 , currentChoosedItemId , nodeOperatorsReplaceDatas,wfFreeDatas,openReturnBackSetting,
            freeWfTrunkNodes,rightDetailShowSearchGroup,currentChoosedItemDataIndex,currentPostParams,selectOperatorsMax} = workflowNewDesignStore;
        const {nodeid = 0} = currentPostParams;
        /** 获取当前 准确位置上的自由节点数据*/
        let startId =  currentChoosedItemDataIndex.split('_')[0];
        let datasIndex = '' , currentFreeDatas = {};
        if(startId != '' && !isEmpty(toJS(wfFreeDatas))){
            datasIndex =  currentChoosedItemDataIndex.split('_')[1];
            currentFreeDatas = wfFreeDatas[startId][datasIndex];
        }
        /************/
        const {isFormInit} = detailForm_1;
        const formParams = detailForm_1.getFormParams();
        const { overflowtimetype = '' , advanceRemind='',approvalSettings = ''} = formParams;
        let group = [] , remindComs = [] , cusTimer=[] , cusDate = [] , currentElement = this.getFreeObjById(currentChoosedItemId,toJS(currentFreeDatas)); //remindComs : 提醒 | cusTimer ： 自定义超时时长 | cusDate ： 自定义超时时间
        if(!currentElement){
            if(isFree == '1'){
                const { startGroup = {}, endGroup = {} } = freeWfTrunkNodes;
                if(startGroup.id == currentChoosedItemId){
                    currentElement = startGroup;
                }else{
                    currentElement = endGroup;
                }
            }else{
                return <div></div>
            }
        }
        const { nodeEntity = {} , parentid = '',addfromGroupId=0} = currentElement;
        const addfromGroupApprovalSettings = groupApprovalSettings[`${(addfromGroupId == 0||!nodeEntity.id)?nodeid:addfromGroupId}`]||'';
        const parentElement = this.getFreeObjById(parentid,toJS(currentFreeDatas)) || {};
        const { mergeType = ''} = parentElement;
        let { nodeStatus = '0' , currentEditRight = '' , nextNodeEditPurview = '1' , nodetype = '1' , mustPass=false} = nodeEntity; // currentEditRight：此属性是由父级节点设置的 “后续节点编辑权限” 所控制

        let isReadOnly = checkEditRight(currentElement,{isReadOnlyModel});
        isFormInit && toJS(freeDetailSetConditions).map((c,index) =>{
            let items = [];
            if(index == 1 && (nodetype == '0' || nodetype == '3')){
                return;
            }
            c.items.map((field,itemIndex) => {
                const domKey = typeof field.domkey === "object" ? field.domkey[0] : field.domkey;
                let col = 1;
                field.viewAttr = isReadOnly ? 1 : field.viewAttr;
                if (field.conditionType.toUpperCase() == WeaTools.types.CASCADER) col = 1;
                if(field.domkey[0] == 'nodename'){
                    items.push({
                        com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4xvcn4@${domKey}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            ratio1to2
                            error={detailForm_1.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}>
                                {mergeType == '3' ?
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5kix2j@${domKey}`} type="flex" align="middle">
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zim7gf@${domKey}`} span={13}>
                                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ql57v6@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xeests@${domKey}`} span={9} offset={2}>
                                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@duelxy@${domKey}`}
                                                viewAttr={isReadOnly ? 1 : 2}
                                                options={[{
                                                    key: "1",
                                                    showname: getLabel(21398,"必须通过"),
                                                }]}
                                                detailtype={2}
                                                value={mustPass?'1':''}
                                                onChange={v=>{this.onChange({mustPass:{value:v}})}}
                                            />
                                        </Col>
                                    </Row>
                                    :
                                    <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@90g575@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                                }
                            </WeaFormItem>),
                        col:col,
                        hide: detailForm_1.isHide(field, (keys, allParams)=> {
                            return false;
                        })
                    }) 
                }
                else if(field.domkey[0] == 'operators'){ //操作者
                    field['browserConditionParam'].viewAttr = isReadOnly ? 1 : field['browserConditionParam'].viewAttr;
                    field['browserConditionParam'].isShowGroup = true;
                    field['browserConditionParam'].maxLength = selectOperatorsMax;
                    items.push({
                        com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lk1liq@${domKey}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            ratio1to2
                            error={detailForm_1.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@x9dgch@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                            </WeaFormItem>),
                        col:col,
                        hide: detailForm_1.isHide(field, (keys, allParams)=> {
                            return false;
                        })
                    }) 
                }else if(field.domkey[0] == 'nodetype'){//节点类型 -- 审批类型添加退回设置
                    if(nodetype == '0'){
                        field.options.push({ disabled: false, key: "0", selected: false,showname: getLabel(125,'创建'), visible: true});  
                    }else if(nodetype == '3'){
                        field.options.push({ disabled: false, key: "3", selected: false,showname: getLabel(251,'归档'), visible: true});  
                    }
                    items.push({
                        com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ztns63@${domKey}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            ratio1to2
                            error={detailForm_1.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}>
                                {nodetype == '1' ?
                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rgoq8d@${domKey}`} type="flex" align="middle">
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vllsup@${domKey}`} span={13}>
                                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@2nyjty@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange} />
                                        </Col>
                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7mv5jt@${domKey}`} span={9} offset={2}>
                                            <a onClick={()=>openReturnBackSetting(true,isReadOnly,toJS(currentFreeDatas))}>{getLabel(84508,'退回设置')}</a>
                                        </Col>
                                    </Row>
                                    :
                                    <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@e7jull@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                                }
                            
                            </WeaFormItem>),
                        col:col,
                        hide: detailForm_1.isHide(field, (keys, allParams)=> {
                            return false;
                        })
                    }) 
                }else if(field.domkey[0] == 'overflowtimetype'){//超时时间
                    // value = 1 - 自定义超时时长 || 2 - 自定义超时时间
                    items.push({
                        com:(<div><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@z85ukf@${domKey}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            ratio1to2
                            error={detailForm_1.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@kibo8e@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                            </WeaFormItem>
                            {['0','1','2'].indexOf(overflowtimetype)<0 && this.getOvertimeRender('after',isReadOnly)}
                            </div>),
                        col:col,
                        hide: detailForm_1.isHide(field, (keys, allParams)=> {
                            return false;
                        })
                    }) 
                }else if(field.domkey[0] == 'overflowtimehour' || field.domkey[0]  == 'overflowtimeminute'){//自定义超时时长
                    field.viewAttr = isReadOnly ? 1 : 3;
                    field.min = 0;
                    field.domkey[0]  == 'overflowtimeminute' ? field.max = 59 : '';
                    if(overflowtimetype == '1'){
                        cusTimer.push(
                            <div className={`freeNode-right-${field.domkey[0]} ${isReadOnly ? 'freeNode-right-readOnly' : ''}`} style={isReadOnly?{width:"30%"}:{}}>
                                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@i2w27w@${domKey}`}
                                    hideLabel = {true}
                                    error={detailForm_1.getError(field)}
                                    tipPosition="bottom"
                                    wrapperCol={{span: 16 , offset : 8}}>
                                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@vvxm6g@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                                        <span className="hour-min-label">{`${field.label}`}</span>
                                </WeaFormItem>
                            </div>
                        )
                        if(field.domkey[0]  == 'overflowtimeminute'){
                            items.push({
                                com:(<div className='right-detail-hour-minute'>
                                    {cusTimer}
                                    {this.getOvertimeRender('after',isReadOnly)}
                                    </div>),
                                col:col,
                                hide: detailForm_1.isHide(field, (keys, allParams)=> {
                                    return false;
                                })
                            }) 
                        }
                    }
                }else if(field.domkey[0] == 'overflowtimedate' || field.domkey[0]  == 'overflowtimetime'){//自定义超时时间
                    field.viewAttr = isReadOnly ? 1 : 3;
                    if(overflowtimetype == '2'){
                        if(field.domkey[0]  == 'overflowtimedate'){
                            field.showTime = true;
                            field.format="yyyy-MM-dd HH:mm";
                            items.push({
                                com:(<div><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@0v8ylm@${domKey}`}
                                    hideLabel = {true}
                                    error={detailForm_1.getError(field)}
                                    tipPosition="bottom"
                                    wrapperCol={{span: 16 , offset : 8}}>
                                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@gq90nv@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                                    </WeaFormItem>
                                    {this.getOvertimeRender('after',isReadOnly)}
                                    </div>),
                                col:col,
                                hide: detailForm_1.isHide(field, (keys, allParams)=> {
                                    return false;
                                })
                            }) 
                        }
                    }
                }else if(field.domkey[0] == 'advanceRemind'){//提前提醒
                    items.push({
                        com:(<div><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@e3rj1z@${domKey}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            ratio1to2
                            error={detailForm_1.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@pd9pph@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                            </WeaFormItem>
                            {advanceRemind != '0' && this.getOvertimeRender('before',isReadOnly)}
                            </div>),
                        col:col,
                        hide: detailForm_1.isHide(field, (keys, allParams)=> {
                            return false;
                        })
                    }) 
                }else if(field.domkey[0] == 'loopRemind'){
                }else if(field.domkey[0] == 'remindInterval'){
                }else{
                    if(field.domkey[0]  == 'allowModify' && (nodetype == '4' || nodetype == '0' || nodetype=='3')){//允许修改表单内容 （查阅类型,创建，归档不显示）
                        return;
                    }
                    if(field.domkey[0] == 'nextNodeEditPurview'){
                        if(isReadOnly){
                            field.detailtype = '1';
                        }
                    }
                    let isHideField = false;
                    if(field.domkey[0] == 'approvalSettings') {
                        let tmpOptions = field.options;
                        let tmpNewOptions = [];
                        const isViewNode = nodetype == '4';
                        const checkOne = approvalSettings.indexOf('1') > -1&&!isViewNode;
                        const checkTwo = approvalSettings.indexOf('2') > -1;
                        tmpOptions = tmpOptions.map((item) => {
                            if(item.key == '1'){
                                item.disabled = isViewNode;
                            }
                            if(item.key == '3' || item.key == '4') {
                                item.disabled = !checkOne;
                            }
                            if(item.key == '2') {
                                item.disabled = checkOne;
                            }
                            if(item.key == '5') {
                                item.disabled = !checkTwo;
                            }
                            if(item.key == '6' || item.key == '7') {
                                item.disabled = !checkOne&&!checkTwo;
                            }

                            let isAddOpt = true;
                            if((item.key == '1' || item.key == '3' || item.key == '4')
                                &&addfromGroupApprovalSettings.indexOf("1") < 0&&approvalSettings.indexOf('1') < 0){
                                item.disabled = true;
                                isAddOpt = false;

                            }
                            if((item.key == '2' || item.key == '5')
                                &&addfromGroupApprovalSettings.indexOf("2") < 0&&approvalSettings.indexOf('2') < 0){
                                item.disabled = true;
                                isAddOpt = false;
                            }
                            if(item.key == '6'
                                && addfromGroupApprovalSettings.indexOf("6") < 0&&approvalSettings.indexOf('6') < 0){
                                item.disabled = true;
                                isAddOpt = false;

                            }
                            if(item.key == '7'
                                &&addfromGroupApprovalSettings.indexOf("7") < 0&&approvalSettings.indexOf('7') < 0){
                                item.disabled = true;
                                isAddOpt = false;

                            }

                            if(isAddOpt == true){
                                tmpNewOptions.push(item);
                            }
                            return item;
                        })
                        field.options = tmpNewOptions;
                        if(tmpNewOptions.length <= 0){
                            isHideField = true;
                        }
                    }
                    items.push({
                        com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@p5y1tp@${domKey}`}
                            className={`freenode-detail-${field.domkey[0]}`}
                            label={`${field.label}`}
                            labelCol={{span: `${field.labelcol}`}}
                            ratio1to2
                            error={detailForm_1.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{span: `${field.fieldcol}`}}>
                            <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@iya30y@${domKey}`} fieldConfig={field} form={detailForm_1} onChange={this.onChange}/>
                            </WeaFormItem>),
                        col:col,
                        hide: detailForm_1.isHide(field, (keys, allParams)=> {
                            return isHideField;
                        })
                    })
                }
            });
            // 暂时添加
            if(index == 0 && false){
                items.push({
                    com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1fosqm@${domKey}`}
                        className={`freenode-detail-nodeStatus`}
                        label={getLabel(503040,'流转状态')}
                        labelCol={{span: 8}}
                        ratio1to2
                        wrapperCol={{span: 16}}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@zq451i@${index}`}
                                onChange={(v)=>{this.onChange({nodeStatus:{value:v}})}}
                            />
                        </WeaFormItem>),
                    col:1,
                })
            }
            /**
            创建 || 归档 || 当前节点 || 已走过节点 ----> 面板默认展开
             */
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@5fj6di@${index}`} 
                needTigger={true} title={c.title} items={items}
                // showGroup={(nodetype == '0'|| nodetype == '3'||nodeStatus=='1'||nodeStatus=='2')?true:rightDetailShowSearchGroup[index]} 
                showGroup={rightDetailShowSearchGroup[index]} 
                onVisibleChange={(showGroup)=>{
                    workflowNewDesignStore.rightDetailShowSearchGroup[index] = showGroup;
                }}
                className={isReadOnly?'cus-readonly-searchgroup':''}
            />)
        });
        return group;
    }

    /** 超时前/后提醒 及是否自动流转到下一操作者*/
    getOvertimeRender = (type='after',isReadOnly) => {//type = 'after' || 'before' (超时后 | 前)
        const { workflowNewDesignStore } = this.props;
        const { freeDetailSetConditions , currentChoosedItemId , wfFreeDatas , currentChoosedItemDataIndex} = workflowNewDesignStore;

        /** 获取当前 准确位置上的自由节点数据*/
        let startId =  currentChoosedItemDataIndex.split('_')[0];
        let datasIndex = '' , currentFreeDatas = {};
        if(startId != ''){
            datasIndex =  currentChoosedItemDataIndex.split('_')[1];
            currentFreeDatas = wfFreeDatas[startId][datasIndex];
        }
        /************/
        let currentNode = this.getFreeObjById(currentChoosedItemId,currentFreeDatas) || {};
        const { nodeEntity = {} } = currentNode;
        const { 
            overtimeToNextOperator = '0',//超时自动流转至下一操作者
            afterLoopRemind = '0',//节点超时 后 开启循环 提醒
            afterRemindInterval = '5',//节点超时 后  间隔时间
            beforeLoopRemind = '0',//节点超时 前 开启循环 提醒
            beforeRemindInterval = '5',//节点超时 前  间隔时间
        } = nodeEntity;
        const cloneConditions = cloneDeep(toJS(freeDetailSetConditions)) || [];
        const selectOptions = cloneConditions[1]?cloneConditions[1].items.filter(v=>v.domkey[0] == 'remindInterval')[0].options:[];
        let rescoms = [];

        //超时自动流转至下一操作者 checkbox
        let nextOpCheckbox = (<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@yitw0t`}
                        value={overtimeToNextOperator}
                        viewAttr={isReadOnly ? 1 : 2}
                        onChange={(value) => {nodeEntity['overtimeToNextOperator']=value;}}
                    />);
        // 节点超时 前/后 checkbox
        let checkbox = (<WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@9wptj4`}
                        value={type=='after' ? afterLoopRemind : beforeLoopRemind}
                        viewAttr={isReadOnly ? 1 : 2}
                        onChange={(value) => {
                            nodeEntity[`${type=='after' ? 'afterLoopRemind' : 'beforeLoopRemind'}`] = value;
                        }}
                    />);
        let select = (<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@iq0qbl`}
                options={selectOptions}
                value={type=='after' ? afterRemindInterval+'' : beforeRemindInterval+''}
                viewAttr={((type=='after' ? afterLoopRemind == '0' : beforeLoopRemind == '0')|| isReadOnly) ? 1 : 2}
                onChange={(v, showname) => {
                    nodeEntity[`${type=='after' ? 'afterRemindInterval' : 'beforeRemindInterval'}`] = v;
                }}
            />);
        rescoms.push(
            <div className="overtime-remind">
                {checkbox}
                <span className='tip-span'>{`${getLabel(2068,'节点超时')}${type == 'after' ? getLabel(18110,'后') :getLabel(18109,'前')}，${getLabel(21977,'每')}`}</span>
                {select}
                <span className='tip-span'>{getLabel(18081,'提醒一次')}</span>
            </div>
        )
        if(type == 'after'){
            rescoms.unshift(
                <div className="overtime-flowto-next">
                    {nextOpCheckbox}
                    <span className='tip-span'>{getLabel(506893,'超时自动流转至下一操作者')}</span>
                </div>
            );
        }
        return rescoms;
    }
    onChange = (v) => {
        const { workflowNewDesignStore } = this.props;
        const { wfFreeDatas , currentChoosedItemId , getFreeObjById , detailForm_1 , operatorTransType,returnBackForm,updateDetailFormParams} = workflowNewDesignStore;
        let { nodeOperatorsReplaceDatas = {} , freeDetailSetConditions , currentChoosedItemDataIndex,renderComponent} = workflowNewDesignStore;

        /** 获取当前 准确位置上的自由节点数据*/
        let startId =  currentChoosedItemDataIndex.split('_')[0];
        let datasIndex = '' , currentFreeDatas = {};
        if(startId != ''){
            datasIndex =  currentChoosedItemDataIndex.split('_')[1];
            currentFreeDatas = wfFreeDatas[startId][datasIndex];
        }
        /************/
        let currentNode = this.getFreeObjById(currentChoosedItemId,currentFreeDatas) || {};
        const { nodeEntity = {} , hasNext = false , next = {}} = currentNode;
        const { overflowtimetype = '',overflowtimehour='',overflowtimeminute='',overflowtimedate=''} = nodeEntity;
        let changedKey = '';
        for(let key in v){
            changedKey = key;
            const curValue = v[key].value;
            if(key === 'operators'){
                nodeOperatorsReplaceDatas[currentChoosedItemId] = v[key].valueObj;
                let datas = v[key].valueObj;
                let ids = [];
                datas.map((element,index)=>{
                    const multiUserType = operatorTransType[element.type];
                    ids.push(`${multiUserType}_${element.id}`);
                });
                nodeEntity[key] = ids.join(',');
                nodeEntity['operatorids'] = curValue;
            }else if(['advanceRemind','overflowtimetype','overflowtimehour','overflowtimeminute'].indexOf(key) >= 0) {//提前提醒
                let needjudge = true;
                if (key == 'overflowtimehour' && curValue == overflowtimehour && curValue == 0) {
                    needjudge = false;
                }
                if (key == 'overflowtimeminute' && curValue == overflowtimeminute && curValue == 0) {
                    needjudge = false;
                }
                if (needjudge) {
                    const resetParams = judgeRemindTime(nodeEntity, curValue, key, detailForm_1);
                    const keys = Object.keys(resetParams);
                    keys.map((tempKey) => {
                        nodeEntity[tempKey] = resetParams[tempKey];
                    })
                }
            } else if('nodetype' == key) {
                if (curValue == 1) {
                    nodeEntity['isselectrejectnode'] = '1';
                    nodeEntity['isSubmitDirectNode'] = '0';
                    returnBackForm.updateFields({'isselectrejectnode': '1', 'isSubmitDirectNode': '0'}, false);
                }
                nodeEntity['nodetype'] = curValue;
                let approvalSettingsVal = nodeEntity['approvalSettings']||'';
                approvalSettingsVal = this.reviseApprovalSettingsVal(approvalSettingsVal,curValue);
                nodeEntity['approvalSettings'] = approvalSettingsVal;
                updateDetailFormParams({approvalSettings:approvalSettingsVal});
            } else if ('approvalSettings' == key) {
                let tempVal = curValue;
                let nodeTypeVal = nodeEntity['nodetype']||'1';
                tempVal = this.reviseApprovalSettingsVal(tempVal,nodeTypeVal);
                nodeEntity['approvalSettings'] = tempVal;
                updateDetailFormParams({approvalSettings:tempVal});
            } else{
                nodeEntity[key] = curValue;
            }
            if(key === 'nodename'){
                const nameStr = curValue;
                const res = this.checkNodeNameLen(99,nameStr);
                if(!res.isPassed){
                    detailForm_1.showError('nodename', '"'+getLabel(502717, '节点名称')+'"' + getLabel(502997, '长度不能超过')+' 100 '+getLabel(385391, '个字符'));
                }
            }
        }
        renderComponent();
    }

    reviseApprovalSettingsVal = (val,nodeTypeVal) => {
        let tempVal = val;

        let temp_val =['1','2','3','4','5','6','7'];
        let temp_checked = {};
        temp_val.map(vkey => {
            temp_checked[vkey] = tempVal.indexOf(vkey) > -1;
        });
        if(nodeTypeVal == '4'){
            temp_checked['1'] = false;
        }
        if(temp_checked['1'] == true) {
            temp_checked['2'] = true;
        }else {
            temp_checked['3'] = false;
            temp_checked['4'] = false;
        }

        if(temp_checked['2'] == false){
            temp_checked['5'] = false;
        }

        if(temp_checked['1']== false&&temp_checked['2']==false){
            temp_checked['6'] = false;
            temp_checked['7'] = false;
        }
        tempVal = '';
        temp_val.map(vkey => {
            if(temp_checked[vkey] == true){
                if(tempVal == ''){
                    tempVal = vkey;
                }else{
                    tempVal += `,${vkey}`;
                }
            }
        });
        return tempVal;
    }

    checkNodeNameLen = (endLen,str='') => {
        let codeLen = 0,endStr=str,isPassed=true;
        for(let i=0,len = str.length;i<len;i++){
            if ((str.charCodeAt(i)<=255)){
                codeLen=codeLen+1;
                if(codeLen>endLen){
                    isPassed=false;
                    endStr = str.substring(0,i);
                    break;
                }
            }else{
                codeLen=codeLen+3;
                if(codeLen>endLen){
                    isPassed=false;
                    endStr = str.substring(0,i);
                    break;
                }
            }
        }
        return {endStr,isPassed}
    }
    getBranchDetailCont = () => {
        const { workflowNewDesignStore , isReadOnlyModel} = this.props;
        const { detailForm_1 , rightDetailType = '' , currentChoosedBranchId = '' , wfFreeDatas = {} ,globalNextNodeEditPurview,
        currentChoosedItemDataIndex,currentPostParams} = workflowNewDesignStore;
        const {nodeid = 0} = currentPostParams;
        /** 获取当前 准确位置上的自由节点数据*/
        let startId =  currentChoosedItemDataIndex.split('_')[0];
        let datasIndex =  currentChoosedItemDataIndex.split('_')[1];
        let currentFreeDatas = wfFreeDatas[startId][datasIndex];
        /************/
        let currentBranchElement = this.getFreeObjById(currentChoosedBranchId , currentFreeDatas) || {};
        let { mergeType = '1' , mergeValue = '' , parallelNodeGroupDatas = [] ,nodeChartEntity = {} , id } = currentBranchElement;
        const {edit = false} = nodeChartEntity;
        //分支合并方式是否有编辑权限
        let readOnly = isReadOnlyModel=='true' || !edit;

        mergeType+='';
        let result = [];
        const branchOptions = [
            {
                key: "1",
                selected: true,
                showname: getLabel(506894,"按比例通过")
            },{
                key: "2",
                selected: false,
                showname: getLabel(500223,'按分支数通过 ')
            },{
                key: "3",
                selected: false,
                showname: getLabel(390423,'指定通过分支')
            }
        ];
        if(mergeValue === ''){
            mergeType == '1' ? mergeValue = '100' : mergeValue = '1';
        }
        result.push(
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@we0eo6@item1`}
                label={getLabel(506895,'通过分支选项')}
                labelCol={{span: 6}}
                wrapperCol={{span: 18}}>
                    <div className='branch-set-wrapper' style={readOnly?{paddingTop:'4px'}:{}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dg1xco@ec1`}
                            options={branchOptions}
                            value={mergeType}
                            viewAttr={readOnly ? 1 : 2}
                            onChange={(v, showname)=> {
                                let params = {
                                    mergeType:v,
                                    mergeValue : v == '1' ? '100' : '1'
                                }
                                this.setBranchMergeParams(params,currentFreeDatas);
                            }}
                        />
                        {mergeType == '1' &&
                            <div className='branch-set-by-ratio'>
                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@m2tijb@ec2`}
                                    value={mergeValue+''}
                                    viewAttr = {readOnly ? 1 : 2}
                                    onBlur={value => {
                                        if(value < 0 || isNaN(value)){
                                            value = 0;
                                        }
                                        if(value > 100){
                                            value = 100;
                                        }
                                        value = Math.round(value);
                                        this.setBranchMergeParams({mergeValue:value},currentFreeDatas);
                                    }}
                                />
                                <span className='ratio-tag'>%</span>
                                <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@f55gi4@ec3`}
                                    width =  {196}
                                    title={getLabel(506896,'比例=通过分支数/总分支数，实际通过比例大于等于所设比例时，转入下一节点。')}
                                />
                            </div>
                        }
                        {mergeType == '2' &&
                            <div className='branch-set-by-ratio'>
                                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@cy4ink@ec4`}
                                    value={mergeValue}
                                    viewAttr = {readOnly ? 1 : 2}
                                    onBlur={value => {
                                        if(value < 1 || isNaN(value)){
                                            value = 1;
                                        }
                                        value = Math.round(value);
                                        this.setBranchMergeParams({mergeValue:value},currentFreeDatas);
                                    }}
                                    helpfulTip={getLabel(506897,'必须是大于或等于1的整数')}
                                    helpfulTipProps={{width:120}}
                                />
                            </div>
                        }
                    </div>
            </WeaFormItem>
        );
        if(mergeType == '3'){
            result.push(
                <div className='branch-set-pointBranch'>
                    <div className='point-branch-tip'>{getLabel(506898,'请至少选择1个必须通过的节点！')}</div>
                    <div className='point-branch-panel'>
                        {this.renderPointBranchItem(readOnly)}
                    </div>
                </div>
            )
        }
        return <div className='freeNode-branch-set'>{result}</div>;
    }
    // 渲染指定分支项
    renderPointBranchItem = (readOnly) => {
        const { workflowNewDesignStore } = this.props;
        const { detailForm_1 , rightDetailType = '' , currentChoosedBranchId = '' , wfFreeDatas = {},currentChoosedItemDataIndex,renderComponent} = workflowNewDesignStore;

        /** 获取当前 准确位置上的自由节点数据*/
        let startId =  currentChoosedItemDataIndex.split('_')[0];
        let datasIndex =  currentChoosedItemDataIndex.split('_')[1];
        let currentFreeDatas = wfFreeDatas[startId][datasIndex];
        /************/

        let currentBranchElement = this.getFreeObjById(currentChoosedBranchId , currentFreeDatas) || {};
        const { parallelNodeGroupDatas = [] } = currentBranchElement;
        let result = [];
        parallelNodeGroupDatas.map((element,index,array)=>{
            const { nodeElement = false , nodeEntity = {} , id = ''} = element;
            const { mustPass = false} = nodeEntity;
            if(nodeElement){
                result.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@duvmih@${id}`}
                            label={<div className='point-branch-item'>
                                    <span className="branch-item-icon"><span></span></span>
                                    <span className="branch-item-name" title={nodeEntity.nodename}>{nodeEntity.nodename}</span>
                                </div>}
                            labelCol={{span: 12}}
                            wrapperCol={{span: 11,offset:1}}
                            colon = {false}
                        >
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dgxbuz@${id}`}
                            options={[{
                                key: "1",
                                selected: false,
                                showname: getLabel(21398,'必须通过')
                            }]}
                            value = {mustPass ? '1' : ''}
                            detailtype={2}
                            onChange={(v)=>{
                                let res = this.setElementNodeData(id,currentFreeDatas,{mustPass:v=='1' ? true : false});
                                wfFreeDatas[startId][datasIndex] = res;
                                renderComponent();
                            }}
                            viewAttr={readOnly ? 1 : 2}
                        />
                    </WeaFormItem>
                )
            }
        });
        return result;
    }
    setBranchMergeParams = (params={},wfFreeDatas={}) => {
        const { workflowNewDesignStore } = this.props;
        let { currentChoosedBranchId = '' , currentChoosedItemDataIndex} = workflowNewDesignStore;
        let fakeDatas = toJS(wfFreeDatas);

        let res = this.setBranchData(currentChoosedBranchId,fakeDatas,params);

        let startId =  currentChoosedItemDataIndex.split('_')[0];
        let datasIndex =  currentChoosedItemDataIndex.split('_')[1];

        workflowNewDesignStore.wfFreeDatas[startId][datasIndex] = {...res};
        workflowNewDesignStore.renderComponent();
    }
    setElementNodeData = (eltId='',mapData={},params={}) => {
        const { id = '' , nodeElement = false , hasNext = false , next = {} , parallelNodeGroupDatas = [],nodeEntity = {}} = mapData;
        let fakeData = null;
        if(eltId == id){
            fakeData = {...nodeEntity,...params};
            mapData.nodeEntity = fakeData;
        }
        else{
            if(hasNext){
                let res = this.setElementNodeData(eltId,next,params);
                fakeData = res ? res : fakeData;
                mapData.next = fakeData;
            }
            parallelNodeGroupDatas.map((element,index)=>{
                let res = this.setElementNodeData(eltId,element,params);
                fakeData = res ? res : fakeData;
                mapData.parallelNodeGroupDatas[index] = fakeData;
            });
        }
        return mapData;
    }
    setBranchData = (eltId='',mapData={},params={}) => {
        const { id = '' , nodeElement = false , hasNext = false , next = {} , parallelNodeGroupDatas = []} = mapData;
        let fakeData = null;
        if(eltId == id){
            fakeData = {...mapData,...params};
            mapData = fakeData;
        }
        else{
            if(hasNext){
                let res = this.setBranchData(eltId,next,params);
                fakeData = res ? res : fakeData;
                mapData.next = fakeData;
            }
            parallelNodeGroupDatas.map((element,index)=>{
                let res = this.setBranchData(eltId,element,params);
                fakeData = res ? res : fakeData;
                mapData.parallelNodeGroupDatas[index] = fakeData;
            });
        }
        return mapData;
    }
    getFreeObjById = (id='',mapData) => {
        const { parallelNodeGroupDatas = []} = mapData;
        let freeObj = null;
        // let mapData = cloneDeep(wfFreeDatas.rootElement);
        if(mapData.id && mapData.id == id){
            freeObj = mapData;
        }
        if(mapData.hasNext){
            let res = this.getFreeObjById(id,mapData.next);
            freeObj = res ? res : freeObj;
        }
        if(parallelNodeGroupDatas.length > 0){
            parallelNodeGroupDatas.map(v=>{
                let res = this.getFreeObjById(id,v);
                freeObj = res ? res : freeObj;
            })
        }
        return freeObj;
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@7c706y`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(WorkflowFreeRightDetail);